<script setup lang="ts">
import {onMounted, ref, watchEffect} from "vue";
import {pageReceive,save,edit,remove} from '@/api/receiveaddress.ts'
import {treelist} from '@/api/area.ts'
import loginDialog from '@/pages/personcenter/login.vue'
import { onShow } from "@dcloudio/uni-app";
onMounted(()=>{
	getArea()
	getList()
})
onShow(()=>{
	if(!uni.getStorageSync('token')){
		console.log("ho")
		uni.setStorageSync('login',true)
	}
})
watchEffect(()=>{
	if(!uni.getStorageSync('token')){
		console.log("ho")
		uni.setStorageSync('login',true)
	}
	getList()
})
const queryParams=ref({
	page:1,
	limit:10
})
const list=ref()
const total=ref()
const getList=()=>{
	pageReceive(queryParams.value).then(res=>{
		list.value=res.data.list
		total.value=res.data.total
	})
}
const areas = ref()
const getArea=()=>{
	treelist().then(res=>{
		areas.value=res.data
	})
}
const options = ref(
    [{
      text: '删除',
      style: {
        fontSize:'13px',
        backgroundColor: '#dd524d'
      }
    }]
)
const onClick=(e)=> {
  console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
}
const change=(event)=> {
  console.log('改变事件', event);
}
const popup=ref(false)
const addAddress=()=>{
  popup.value.open('bottom')
}
const onchange=(e)=> {
	const value = e.detail.value
}
const onnodeclick=(node)=> {}
const items=ref([{
          text: "一年级",
          value: "1-0",
          children: [
            {
              text: "1.1班",
              value: "1-1"
            },
            {
              text: "1.2班",
              value: "1-2"
            }
          ]
        },
        {
          text: "二年级",
          value: "2-0"
        },
        {
          text: "三年级",
          value: "3-0"
        }])
const addressForm=ref({
	name:'',
	phone:null,
	defaulted:'0',
	detailAddress:null,
	areaId:null,
})		
const baseForm=ref()
const saveAddress=()=>{
	save(addressForm.value)
	getList()
	popup.value.close()
}
const cancel=()=>{
	popup.value.close()
}
const changeDefault=(e,id)=>{
	if(e.detail.value){
		edit({"defaulted":'1',"id":id})
	}else{
		edit({"defaulted":'0',"id":id})
	}
	getList()
}
</script>

<template>
<view class="container-address">
  <uni-list  type="line"v-for="(item,index) in list" :key="index">
    <uni-swipe-action>
      <uni-swipe-action-item
          :right-options="options"  @click="onClick" @change="change"
      >
        <uni-list-item  title=""  rightText="">
			<template v-slot:header style="width: 90%;">
				<view>
					<uni-icons type="map-pin"></uni-icons>  {{item.address}}{{item.detailAddress}}
				</view>
				<view style="color: gray;margin-top: 5px;margin-bottom: 5px;font-size: 14px;">
					<uni-icons type="person" color="lightblue"></uni-icons>  {{item.name}}
				</view>
				<view  style="color: gray;font-size: 14px">
					<uni-icons type="phone" color="green"></uni-icons>  {{item.phone}}
				</view>
			</template>
			<template v-slot:footer>
				<switch  color="#007aff" style="transform:scale(0.6)" @change="changeDefault($event,item.id)"
				:checked="item.defaulted == '1' ? true:false"></switch>
			</template>
		</uni-list-item>
      </uni-swipe-action-item>
    </uni-swipe-action>
  </uni-list>
  <view class="uni-btn">
    <button type="primary" size="mini" @click="addAddress">新增</button>
  </view>
  <uni-popup ref="popup" background-color="#fff" @change="change">
    <view class="popup-content">
		<uni-forms ref="baseForm" :modelValue="addressForm" label-width="100">
			<uni-forms-item label="姓&nbsp;&nbsp;名" required>
				<uni-easyinput  v-model="addressForm.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="手机号" required>
				<uni-easyinput v-model="addressForm.phone"  placeholder="请输入手机号"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="省市区县" required>
				<uni-data-picker  v-model="addressForm.areaId"  :localdata="areas" popup-title="请选择省市区县" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
			</uni-forms-item>
			<uni-forms-item label="详细地址" required>
				<uni-easyinput  v-model="addressForm.detailAddress"  placeholder="请输入详细地址"></uni-easyinput>
			</uni-forms-item>
			<view label="" style="text-align: center;width: 100%;display: flex;justify-content: space-around;">
				<button type="primary" size="mini" @click="saveAddress">保存</button>
				<button type="warn" size="mini" @click="cancel">取消</button>
			</view>
		</uni-forms>
    </view>
  </uni-popup>
  <loginDialog></loginDialog>
</view>
</template>

<style scoped lang="scss">
.container-address{
	width: 100%;
	height:  100%;
}
.uni-btn{
	width: 100%;
	height: 100%;
	text-align: center;
	margin-top: 20px;
}
.popup-content {
  padding: 20px;
  height: 100%;
  min-height: 150px;
}
</style>